<template>
	<div class="con" v-if="detail">
		<van-pull-refresh v-model="isRefresh" @refresh="onRefresh" success-text="刷新成功">
			<!-- 优惠券 -->
			<div class="coupon" v-if="detail.coupon_info.receive_status !== 2">
				<div class="coupon__item">
					<div class="coupon__item-lef">
						<p><span>￥</span>{{ detail.coupon_info.coupon_price }}</p>
						<div>满{{ detail.coupon_info.use_min_price }}元可用</div>
					</div>
					<div class="coupon__item-rig">
						<div>{{ detail.coupon_info.title }}</div>
						<p>
							{{ moment(detail.coupon_info.start_time * 1000).format('MM-DD HH:mm:ss') }} ~
							{{ moment(detail.coupon_info.end_time * 1000).format('MM-DD HH:mm:ss') }}
						</p>
					</div>
				</div>
				<p class="coupon__tip">每人限领{{ detail.coupon_info.receive_limit }}张</p>
				<div class="coupon__btn" v-if="detail.coupon_info.receive_status === 1" @click="receive">立即领取</div>
				<div class="coupon__btn--ed" v-if="detail.coupon_info.receive_status === 0">未开始</div>
				<div class="coupon__btn--ed" v-if="detail.coupon_info.receive_status === 6">已使用</div>
				<div class="coupon__btn--ed" v-if="detail.coupon_info.receive_status === 4">已领完</div>
				<div class="coupon__btn--ed" v-if="detail.coupon_info.receive_status === 5">已过期</div>
			</div>
			<!-- 优惠券 已领取未使用 -->
			<div class="coupon--ed" v-else>
				<p class="title">{{ detail.config.title_recomment }}可用此优惠券：</p>
				<div>
					<p class="tag">
						<span>商品</span>
						<span>优惠券</span>
					</p>
					<p class="limit">满{{ detail.coupon_info.use_min_price }}元减{{ detail.coupon_info.coupon_price }}元</p>
				</div>
				<span
					>使用时间：{{ moment(detail.coupon_info.start_time * 1000).format('YYYY-MM-DD HH:mm:ss') }} ~
					{{ moment(detail.coupon_info.end_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</span
				>
			</div>
			<!-- 规则 -->
			<div class="coupon__rule" @click="$refs['rules'].open()">规则</div>
			<!-- 券内推荐商品 -->
			<div class="coupon-goods">
				<div class="coupon-goods__h1" v-if="detail.goods_list.length > 0">{{ detail.config.title_recomment }}</div>
				<!-- 单品 -->
				<div class="free__good" v-for="(item, index) in detail.goods_list" :key="index">
					<img class="good__cover" :src="item.image" />
					<div class="good__info">
						<p class="title">{{ item.store_name }}</p>
						<div class="price">
							<p class="price__lef">¥{{ item.ot_price }}</p>
							<p class="price__rig">¥{{ item.price }}</p>
							<p class="price__btn"><span>¥</span>{{ (Number(item.price) - Number(detail.coupon_info.coupon_price)).toFixed(2) }}</p>
						</div>
						<div class="btn" @click="toDetail(item)">
							<span>立即抢购</span><img src="../../../assets/images/squeeze/icon_arrow.png" alt="" />
						</div>
					</div>
				</div>
			</div>
			<!-- 其他商品 -->
			<div class="order-goods">
				<div class="coupon-goods__h1" v-if="orderList.length > 0">{{ detail.config.title_other }}</div>
				<van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getList">
					<div class="list__item" v-for="(cItem, cIndex) in orderList" :key="cIndex">
						<img class="item__cover" :src="cItem.image" alt="" />
						<div class="item__info">
							<div class="title">
								<img src="../../../assets/images/squeeze/icon_tag.png" alt="" />
								{{ cItem.store_name }}
							</div>
							<p class="sale">已抢{{ cItem.sales }}件</p>
							<div class="price">
								<span>补贴价¥</span>
								<span>{{ cItem.price }}</span>
								<span>¥{{ cItem.ot_price }}</span>
							</div>
							<div class="btn" @click="toDetail(cItem)">立即抢购<img src="../../../assets/images/squeeze/icon_arrow.png" alt="" /></div>
						</div>
					</div>
				</van-list>
			</div>
		</van-pull-refresh>
		<rules ref="rules" :rule="rule"></rules>
		<div class="flex-icon" @click="toZFX">
			<img class="flex-icon__img" :class="isYao ? 'active' : ''" src="@/assets/images/free/red.png" />
			<div class="flex-icon__value" :class="isAnimation ? 'active' : ''">您有188补贴金待领取哦</div>
		</div>
	</div>
</template>

<script>
import moment from 'moment';
import rules from './component/rules';
import store from 'store';
import { CellGroup, Toast } from 'vant';
import { getStore } from '../../../utils/store';
export default {
	components: {
		rules
	},
	data() {
		const couponId = this.getUrlKey('id');
		return {
			couponId: couponId,
			detail: null,
			rule: {},
			orderList: [],
			item: {
				image: 'https://img.alicdn.com/imgextra/i1/1791034722/O1CN01VbTk9N1kkiofEDefF_!!1791034722.jpg',
				store_name: '乐事薯片原味青柠味包装',
				price: '32.00',
				subsidy_price: '36.22',
				list: [
					{
						pic: 'https://img.alicdn.com/imgextra/i1/1791034722/O1CN01VbTk9N1kkiofEDefF_!!1791034722.jpg',
						title: '乐事薯片原味青柠味包装零食休闲食品整箱',
						sale: '1285',
						subsidyPrice: '26',
						price: '99'
					}
				]
			},
			isRefresh: false,
			loading: false,
			finished: false,
			page: 1,
			size: 10,
			isYao: false,
			isAnimation: false
		};
	},
	created() {
		this.getDetail();
		this.getRule();
		this.selfStatistics();
	},
	mounted() {
		setTimeout(() => {
			this.isAnimation = true;
			this.move();
		}, 1000);
	},
	methods: {
		selfStatistics() {
			let selfInfo = getStore('selfInfo');
			this.$service.common.common.selfmallStatistics({
				app: 'self',
				channelId: getUrlParams('channel') || '',
				userId: selfInfo.user_id
			});
		},
		toZFX() {
			this.$baiduPush('通用券', 'tap', '188红包跳转赚分享');
			window.location.href = 'https://zfx.xmonecode.com/?flashsale=2&sdkType=yzf&app=yzf&channel=1012&hybridVersion=3.0';
		},
		login() {
			this.loading = true;
			// 获取翼支付授权
			let params = {
				scope: 'user_info,mobile', // 需要授权获取的内容
				clientId: '86000000162', // 第三方应用编号
				redirectUrl: 'http://zfx.xmonecode.com', // 回调地址,必须和申请应用是填写对一致
				merchantCode: '3178034478305436', // 商户号
				clientName: '一码当先', // 商户名称
				state: 'bestpay' // 第三方平台自定义参数，用户授权后会原样回传给第三方平台
			};
			console.log(moment().format('hh:mm:ss'));
			window.BestpayHtml5.User.userAuth(
				params,
				res => {
					console.log('翼支付日志', res);
					this.$baiduPush('授权登录事件', 'tap', '授权成功');
					console.log(moment().format('hh:mm:ss'));
					// this.mallLogin({
					// 	code: res.code,
					// 	grantType: res.grantType,
					// 	refreshToken: res.refreshToken || '',
					// });
				},
				err => {
					// 错误处理
					this.loading = false;
					this.$baiduPush('授权登录事件', 'tap', '授权错误');
				},
				err => {
					// 退出子应用
					this.$baiduPush('授权登录事件', 'tap', '授权取消');
					window.BestpayHtml5.APP.exitSubApp();
				}
			);
		},
		moment,
		onRefresh() {
			this.getDetail();
			this.orderList = [];
			this.page = 1;
			this.finished = true;
			this.getList();
		},
		getList() {
			console.log('getList');
			this.$service.squeeze.index
				.getList({
					page: this.page,
					size: this.size,
					couponId: getUrlParams('id')
				})
				.then(res => {
					this.orderList.push(...res.data.list);
					this.page++;
					this.loading = false;
					this.isRefresh = false;
					res.data.list.length < this.size ? (this.finished = true) : (this.finished = false);
				});
		},
		getUrlKey(name) {
			return (
				decodeURIComponent(
					(new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(window.location.href) || [, ''])[1].replace(/\+/g, '%20')
				) || null
			);
		},
		getDetail() {
			let { token, expires_time } = store.get('selfInfo');
			this.$service.squeeze.index
				.couponDetail({
					token,
					coupon_id: this.couponId
				})
				.then(res => {
					this.detail = res.data;
					this.setTitle(this.detail.config.title);
				});
		},
		getRule() {
			this.$service.squeeze.index
				.getRule({
					key: 31
				})
				.then(res => {
					this.rule = res.data;
				});
		},
		toDetail(item) {
			let { token, expires_time } = store.get('selfInfo');
			expires_time = expires_time.substring(0, 19).replace(/-/g, '/');
			expires_time = new Date(expires_time).getTime();
			if (this.detail.coupon_info.use_status === 2) {
				window.location.href = `${this.$selfUrl}/detail/${item.id}?token=${token}&expires_time=${expires_time}&cid=${
					this.couponId
				}&from=ticket&yzfToken=${getStore('token')}`;
				return;
			}
			window.location.href = `${this.$selfUrl}/detail/${item.id}?token=${token}&expires_time=${expires_time}&cid=${
				this.couponId
			}&from=ticket&yzfToken=${getStore('token')}`;
		},
		receive() {
			let { token, expires_time } = store.get('selfInfo');
			this.$service.squeeze.index
				.receive({
					couponId: this.couponId,
					token
				})
				.then(res => {
					Toast('领取成功~');
					this.detail.coupon_info.receive_status = 2; // 已领取完成
				})
				.catch(err => {
					Toast(err.msg);
				});
		},
		setTitle(title) {
			window.BestpayHtml5.APP.setTitleBar({
				title: {
					text: title
				}
			});
		},
		move() {
			let time = setTimeout(() => {
				this.isAnimation = false;
				clearTimeout(time);
			}, 3000);

			let time2 = setTimeout(() => {
				this.isYao = true;
				clearTimeout(time2);
			}, 5000);
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/views/squeeze/common/index.scss';
.con {
	padding-bottom: 100px;
	.coupon {
		background-color: #fff;
		position: relative;
		height: 516px;
		padding-top: 82px;
		margin-bottom: 36px;
		background-image: url('../../../assets/images/squeeze/bc_coupon.png');
		background-size: 100%;
		background-repeat: no-repeat;
		.coupon__item {
			padding-bottom: 10px;
			width: 696px;
			height: 200px;
			margin: 0 auto;
			margin-bottom: 54px;
			background-image: url('../../../assets/images/squeeze/bc_ticket.png');
			background-size: 100% 100%;
			@include flexBox(flex-start, center);
			.coupon__item-lef {
				width: 248px;
				flex-shrink: 0;
				color: #fff;
				text-align: center;
				p {
					line-height: normal;
					margin-block-start: 0;
					margin-block-end: 0;
					font-size: 68px;
					span {
						font-size: 34px;
					}
				}
				div {
					font-size: 32px;
				}
			}
			.coupon__item-rig {
				flex: 1;
				text-align: center;
				div {
					font-size: 30px;
					color: #8e4509;
					margin-bottom: 14px;
				}
				p {
					font-size: 24px;
					color: #dc9154;
				}
			}
		}
		.coupon__tip {
			color: #6b6b6b;
			font-size: 26px;
			text-align: center;
			margin-bottom: 22px;
		}
		.coupon__btn {
			width: 418px;
			line-height: 70px;
			color: #fff;
			font-size: 28px;
			text-align: center;
			margin: 0 auto;
			border-radius: 8px;
			background: linear-gradient(143deg, #fe567f 0%, #f6504a 100%);
		}
		.coupon__btn--ed {
			width: 418px;
			line-height: 66px;
			color: #fe567f;
			font-size: 28px;
			text-align: center;
			margin: 0 auto;
			border-radius: 8px;
			border: 2px solid #fe567f;
		}
	}
	.coupon--ed {
		background-color: #fff;
		padding: 32px;
		padding-bottom: 66px;
		margin-bottom: 36px;
		.title {
			font-size: 32px;
			margin-bottom: 38px;
		}
		div {
			padding-bottom: 20px;
			margin-bottom: 20px;
			border-bottom: 2px solid #e6e6e6;
			display: flex;
			.tag {
				width: 157px;
				height: 48px;
				background-image: url('../../../assets/images/squeeze/bc_ticket_pink.png');
				background-size: 100% 100%;
				color: #fff;
				font-size: 24px;
				padding: 8px;
				margin-right: 16px;
				:nth-child(1) {
					margin-right: 18px;
				}
			}
			p {
				font-size: 28px;
			}
		}
		& > span {
			display: block;
			font-size: 26px;
		}
	}
	.coupon__rule {
		position: fixed;
		top: 18px;
		right: 0;
		z-index: 999;
		width: 126px;
		line-height: 52px;
		color: #fff;
		font-size: 28px;
		text-align: center;
		border-radius: 40px 0 0 40px;
		background-color: rgba(0, 0, 0, 0.36);
	}
	[class*='__h1'] {
		display: inline-block;
		padding: 0 65px;
		min-width: 320px;
		line-height: 54px;
		margin: 0 auto;
		text-align: center;
		font-size: 32px;
		background-image: url('../../../assets/images/squeeze/bc_title22.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		margin-bottom: 36px;
	}
	.coupon-goods {
		margin-bottom: 36px;
		font-size: 0px;
		text-align: center;
		padding: 0 24px;
		.free__good {
			position: relative;
			display: flex;
			align-items: flex-start;
			background-color: #fff;
			padding: 16px;
			margin-bottom: 20px;
			border-radius: 16px;
			.good__cover {
				width: 284px;
				height: 284px;
				margin-right: 14px;
				flex-shrink: 0;
			}
			.over-pic {
				width: 284px;
				height: 284px;
				background-color: rgba(0, 0, 0, 0.2);
				position: absolute;
				top: 16px;
				left: 16px;
				@include flexBox(center, center);
				& > div {
					width: 130px;
					height: 130px;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 0.3);
					@include flexBox(center, center);
					& > div {
						width: 105px;
						height: 105px;
						line-height: 100px;
						text-align: center;
						border-radius: 50%;
						border: 1px solid #fff;
						color: #fff;
						font-size: 28px;
						transform: rotate(-45deg);
					}
				}
			}
			.good__info {
				display: inline-block;
				width: 370px;
				.title {
					@include ellipsis();
					font-size: 30px;
					color: #a55a1d;
					margin-bottom: 16px;
				}
				.price {
					position: relative;
					height: 146px;
					margin-bottom: 16px;
					background-image: url('../../../assets/images/today/bc_today_top.png');
					background-size: 100% 100%;
					.price__lef,
					.price__rig {
						font-size: 24px;
						color: #666666;
						position: absolute;
						top: 44px;
					}
					.price__lef {
						left: 0;
					}
					.price__rig {
						right: 0;
					}
					.price__btn {
						width: 182px;
						color: #fff;
						font-size: 40px;
						position: absolute;
						top: 55px;
						left: 92px;
						span {
							font-size: 28px;
						}
					}
				}
				.btn {
					margin: 0 auto;
					width: 264px;
					line-height: 60px;
					border-radius: 30px;
					font-weight: 500;
					font-size: 28px;
					color: #fff;
					text-align: center;
					background-color: #f54f42;
					font-weight: bold;
					span {
						margin-right: 12px;
					}
					img {
						width: 14px;
						height: 20px;
					}
				}
			}
		}
	}
	.order-goods {
		padding: 0 24px;
		font-size: 0;
		text-align: center;
		.list__item {
			position: relative;
			display: flex;
			padding: 16px;
			background-color: #fff;
			border-radius: 16px;
			margin-bottom: 24px;
			text-align: left;
			.item__cover {
				width: 284px;
				height: 284px;
				display: block;
				margin-right: 18px;
				flex-shrink: 0;
				border-radius: 16px;
			}
			.over-pic {
				width: 284px;
				height: 284px;
				background-color: rgba(0, 0, 0, 0.2);
				position: absolute;
				border-radius: 16px;
				top: 16px;
				left: 16px;
				z-index: 2;
				@include flexBox(center, center);
				& > div {
					width: 130px;
					height: 130px;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 0.3);
					@include flexBox(center, center);
					& > div {
						width: 105px;
						height: 105px;
						line-height: 100px;
						text-align: center;
						border-radius: 50%;
						border: 1px solid #fff;
						color: #fff;
						font-size: 28px;
						transform: rotate(-45deg);
					}
				}
			}
			.item__info {
				flex: 1;
				overflow: hidden;
				.title {
					font-size: 30px;
					@include ellipsis(2);
					img {
						width: 60px;
						height: 32px;
						vertical-align: middle;
					}
				}
				.sale {
					font-size: 24px;
					color: #666666;
					margin-bottom: 20px;
				}
				.price {
					font-size: 1px;
					margin-bottom: 16px;
					color: #f54f42;
					:nth-child(1) {
						font-size: 28px;
					}
					:nth-child(2) {
						margin-right: 10px;
						font-size: 40px;
						font-weight: bold;
					}
					:nth-child(3) {
						font-size: 24px;
						color: #b5b5b5;
						text-decoration: line-through;
					}
				}
				.btn {
					width: 260px;
					line-height: 60px;
					background: linear-gradient(143deg, #fe567f 0%, #f6504a 100%);
					color: #fff;
					font-size: 28px;
					text-align: center;
					border-radius: 8px;
					position: relative;
					left: 100px;
					img {
						width: 14px;
						height: 20px;
						margin-left: 8px;
					}
				}
			}
		}
	}
}
</style>
